<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        
        body {
            background: #000;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="buffermove1.js"></script>
    <script type="text/javascript">
        //this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
        function Fireworks(x, y) { //x,y鼠标的位置
            this.x = x;
            this.y = y;
            var that = this;
            //1.创建烟花。
            this.ceratefirework = function() {
                this.firework = document.createElement('div'); //整个构造函数内部都可以使用
                this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;
                document.body.appendChild(this.firework);
                this.fireworkmove();
            };
            //2.烟花运动和消失
            this.fireworkmove = function() {
                buffermove(this.firework, {
                    top: this.y
                }, function() {
                    document.body.removeChild(that.firework); //烟花消失，碎片产生
                    that.fireworkfragment();
                });
            };
            //3.创建烟花的碎片
            this.fireworkfragment = function() {
                for (var i = 0; i < this.ranNum(30, 60); i++) {
                    this.fragment = document.createElement('div');
                    this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
                    document.body.appendChild(this.fragment);
                    this.fireworkboom(this.fragment); //将当前创建的碎片传过去，方便运动和删除
                }
            }

            //4.碎片运动
            this.fireworkboom = function(obj) { //obj:创建的碎片

                //设点速度(值不同，正负符号不同)
                var speedx = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));
                var speedy = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));

                //初始速度
                var initx = this.x;
                var inity = this.y;
                obj.timer = setInterval(function() { //一个盒子运动
                    initx += speedx;
                    inity += speedy;
                    if (inity >= document.documentElement.clientHeight) {
                        clearInterval(obj.timer);
                        document.body.removeChild(obj);
                    }
                    obj.style.left = initx + 'px';
                    obj.style.top = inity + 'px';
                }, 20);

            }

            //随机方法
            this.ranNum = function(min, max) {
                return Math.round(Math.random() * (max - min)) + min;
            };
        }


        document.onclick = function(ev) {
            var ev = ev || window.event;
            new Fireworks(ev.clientX, ev.clientY).ceratefirework();
        }
    </script>

</body>

</html>